<template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card shadow="never">
                <div class="top">
                    <el-form :model="form" ref="form">
                        <div class="row">
                            <div class="col">
                                <el-form-item label-width="54px" label="关键字">
                                    <el-input v-model.trim="form.keyword"></el-input>
                                </el-form-item>
                            </div>
                            <div class="col">
                                <el-form-item label-width="54px" label="状态">
                                    <el-select v-model="form.state" placeholder="请选择状态">
                                        <el-option label="启用" value="1"></el-option>
                                        <el-option label="禁用" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="col btn-col">
                                <el-button class="btn" @click="clear($event)">清除</el-button>
                                <el-button class="btn" @click="render('reload')" type="primary">搜索</el-button>
                            </div>
                            <div class="col"></div>
                            <div class="col btn-col last-col">
                                <el-button class="btn" @click="add" type="success" icon="el-icon-edit">新增技巧</el-button>
                            </div>
                        </div>
                    </el-form>
                </div>

                <div class="center">
                    <el-alert
                        :title="`共有 ${total} 条数据`"
                        type="info"
                        :closable="false"
                        show-icon>
                    </el-alert>
                </div>

                <div class="bottom">
                    <template>
                        <el-table
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                label="序号">
                            </el-table-column>
                            <el-table-column
                                prop="title"
                                min-width="180px"
                                label="标题">
                            </el-table-column>
                            <el-table-column
                                prop="videoURL"
                                min-width="50px"
                                label="视频">
                                <template v-slot="scope">
                                    <i class="el-icon-film" @click="clickShowVideo(scope.row.videoURL)" v-if="hasVideo(scope.row.videoURL)"></i>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="state"
                                min-width="70px"
                                label="状态">
                                <template v-slot="scope">
                                    {{ scope.row.state === 0 ? '已禁用' : '已启用' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="visits"
                                min-width="80px"
                                label="阅读数">
                            </el-table-column>
                            <el-table-column
                                prop="username"
                                min-width="100px"
                                label="录入人">
                            </el-table-column>
                            <el-table-column
                                prop="createTime"
                                min-width="150px"
                                label="录入时间">
                                <template v-slot="scope">
                                    {{ timeFormat(scope.row.createTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="165">
                                <template v-slot="scope">
                                    <el-button @click="openDialog(scope.row.id, scope.row.username)" size="small" type="text">预览</el-button>
                                    <el-button @click="disabled(scope.row.id, scope.row.state)" size="small" type="text">
                                        {{ scope.row.state === 0 ? '启用' : '禁用' }}
                                    </el-button>
                                    <el-button @click="edit(scope.row.id)" :disabled="scope.row.state !== 0"  size="small" type="text">修改</el-button>
                                    <el-button @click="del(scope.row.id)" :disabled="scope.row.state !== 0" size="small" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="footer">
                            <el-pagination
                                background
                                @size-change="sizeChange"
                                @current-change="currentChange"
                                :current-page="page"
                                :page-sizes="[5, 10, 20, 50]"
                                :page-size="5"
                                layout="prev, pager, next, sizes, jumper"
                                :total="total">
                            </el-pagination>
                        </div>
                    </template>
                </div>
            </el-card>
        </div>

        <article-dialog v-model="showDialog"
                        :currentID="currentID"
                        :dialogType="dialogType"
                        @reload="render">
        </article-dialog>

        <el-dialog
            title="预览文章"
            :visible.sync="showViewDialog"
            width="60%">
            <h1>{{ viewData.title }}</h1>
            <div class="desc">
                <span>{{ timeFormat(viewData.createTime) }}</span>
                <span>{{ viewData.username }}</span>
                <span>
                    <i class="el-icon-view"></i>
                    <span>{{ viewData.visits }}</span>
                </span>
            </div>
            <div class="content" v-html="viewData.articleBody"></div>
        </el-dialog>

        <view-video v-model="showVideo"></view-video>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { delArticleItem, getArticleItem, getArticleList, setArticleState } from '@/api/hmmm/articles'

export default {
    created () {
        this.render()
    },
    data () {
        return {
            showDialog: false,
            showVideo: false,
            showViewDialog: false,
            dialogType: 0,
            viewData: {},
            currentID: 0,
            form: {},
            tableData: [],
            page: 1,
            pageSize: 5,
            total: 0,
        }
    },
    methods: {
        async render (reload) {
            if (reload === 'reload') this.page = 1
            const res = await getArticleList({
                ...this.form,
                page: this.page,
                pagesize: this.pageSize,
            })
            this.total = res.data.counts
            this.tableData = res.data.items
        },
        clear (e) {
            e.target.blur()
            e.target.parentNode.blur()
            this.form = {}
            this.render()
        },
        async openDialog (id, username) {
            this.showViewDialog = true
            this.currentID = id
            const res = await getArticleItem({
                id: id,
            })
            this.viewData = res.data
            this.$set(this.viewData, 'username', username)
        },
        async disabled (id, state) {
            const res = await setArticleState({
                id: id,
                state: state === 0 ? 1 : 0
            })
            if (res.data.success) {
                this.$message.success(`${state === 0 ? '启用' : '禁用'}成功`)
                await this.render()
            }
        },
        edit (id) {
            this.currentID = id
            this.dialogType = 0
            this.showDialog = true
        },
        add () {
            this.dialogType = 1
            this.showDialog = true
        },
        del (id) {
            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await delArticleItem({
                    id: id
                })
                if (res.data.success) {
                    this.$message.success('删除成功')
                    if (this.tableData.length === 1 && this.page > 1) this.page--
                    await this.render()
                }
            }).catch(() => {});
        },
        clickShowVideo (url) {
            this.showVideo = true
        },
        hasVideo (url) {
            const str = url + ''
            const keywords = ['http', 'https', 'www']
            let flag = false
            keywords.forEach(e => {
                if (str.indexOf(e) === 0) flag = true
            })
            return flag
        },
        timeFormat (time) {
            const obj = new dayjs(time)
            return obj.format('YYYY-MM-DD HH:mm:ss')
        },
        sizeChange (val) {
            this.pageSize = val
            this.page = 1
            this.render()
        },
        currentChange (val) {
            this.page = val
            this.render()
        }
    }
}
</script>

<style scoped lang="scss">
.dashboard-container {
    .app-container {
        padding: 5px 10px;

        .top {
            .row {
                display: flex;

                .col {
                    padding: 0 20px 0 0;
                    flex: 1;

                    ::v-deep .el-form-item {
                        margin-bottom: 20px;

                        .el-form-item__content {
                            .el-select {
                                width: 100%;
                            }

                            .el-input__inner {
                                height: 32px;
                                font-size: 13px;
                            }
                        }
                    }
                }

                .btn-col {
                    button {
                        font-size: 13px;
                        height: 32px;
                        margin-top: 2px;
                    }

                    button:first-of-type {
                        margin-left: 14px;
                    }
                }

                .last-col {
                    display: flex;
                    justify-content: end;
                    padding: 0;

                    button {
                        display: flex;
                        justify-content: center;
                        width: 100px;
                    }
                }
            }
        }

        .center {
            padding-bottom: 22px;
        }

        .bottom {
            ::v-deep .el-table {
                border-top: 1px solid #EBEEF5;
                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;

                thead tr {
                    th:nth-of-type(8) {
                        text-align: center;
                    }
                }

                .cell {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;

                    button span {
                        font-size: 13px;
                    }

                    .el-icon-film {
                        color: #409EFF;
                        cursor: pointer;
                        font-size: 20px;
                    }
                }
            }

            .footer {
                display: flex;
                justify-content: end;

                .el-pagination {
                    padding: 20px 0;

                    ::v-deep .el-pagination__jump {
                        margin-left: -5px;
                    }
                }
            }
        }
    }

    ::v-deep .el-dialog {
        .el-dialog__body {
            h1 {
                margin-top: 0;
            }

            .desc {
                margin-bottom: 20px;

                span {
                    margin-right: 10px;
                }

                i {
                    margin-right: 4px;
                }
            }

            .content {
                height: 50vh;
                overflow: auto;
                border-top: 1px dashed #CCCCCC;
                background-color: #F5F5F5;
                padding: 20px;
                border-radius: 8px;

                img {
                    width: 100%;
                    height: auto;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>
